import React, { Component } from 'react';
import { Modal, Form,Table,InputNumber, Input,Radio,Select,DatePicker,Popconfirm ,Row,Col,Button,Icon,Upload, message} from 'antd';
import styles from '../main.less';
import moment from 'moment'
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
import _ from 'underscore'
import * as  ProductModel from '../../model/product';
const config = require('../../config.js');

class _Modal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      productlist:this.props.record.products,
      flag:false,
    };
  }

  showModelHandler = (e) => {
    if (e) e.stopPropagation();

    this.setState({
      visible: true,
    });
    let productlist = this.state.productlist;
    console.log('showModelHandler',productlist)

   productlist.filter(v=>v.status === 'purchased').map(v=>v.flag=true)

  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };
  handleAddCp =  async(e) =>{
    let product_num = this.refs.new_product.refs.input.value
    let cnums=this.state.productlist.map(pd=>pd.cnum);
    if(cnums.findIndex(v=>v==product_num)>0)return false;
    let res = await ProductModel.getByNum(product_num)
    if(res.data.item){
      let productlist = this.state.productlist
      res.data.item.product_num = res.data.item.cnum
      productlist.push(res.data.item)
      this.setState({productlist})
    }
  };
  handleDelCp = (product_num) =>{
    let productlist = this.state.productlist
    productlist = productlist.filter(d=>d.cnum!==product_num)
    this.setState({productlist})
  };
  updateList = (product_num,key,value)=>{
    let productlist = this.state.productlist
    productlist.filter(d=>d.cnum===product_num).map(d=>{
      d[key]=value
    })
    this.setState({productlist})
  };

  handleSubmit = async (e) => {
    let product=[]
    console.log(this.state.productlist,'+++++++++++++');
    this.state.productlist.map(pd=>product[pd.cnum]=product[pd.cnum] || pd);
    await this.props.updateProductList(_.values(product))
    this.hideModelHandler()
  };
  render() {
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const columns = [
      {
        title: '编号',
        dataIndex: 'product_num',
        key: 'product_num',
        render: (text,record) => <span>{text||record.cnum}</span>
      },
      {
        title: '图片',
        dataIndex: 'pic',
        key: 'pic',
        render: (pic) =>  <img style={{width:"50px",heigth:"50px"}} src={config.host+'/file/'+pic} />
      },
      {
        title: '原价',
        dataIndex: 'origin_money',
        key: 'origin_money',
        render: (text,record) => <Input defaultValue={text} disabled={record.flag} onChange={e=>this.updateList(record.cnum,'origin_money',e.target.value)}/>
      },
      {
        title: '折扣',
        dataIndex: 'discount',
        key: 'discount',
        render: (text,record) => <Input defaultValue={text} disabled={record.flag} onChange={e=>this.updateList(record.cnum,'discount',e.target.value)}/>
      },
      {
        title: '合同售价',
        dataIndex: 'contract_money',
        key: 'contract_money',
        render: (text,record) => <Input defaultValue={text} disabled={record.flag} onChange={e=>this.updateList(record.cnum,'contract_money',e.target.value)}/>
      },
      {
        title: '数量',
        dataIndex: 'quantity',
        key: 'quantity',
        render: (text,record) => <InputNumber min={1} max={1000} disabled={record.flag} defaultValue={text||1} onChange={v=>this.updateList(record.cnum,'quantity',v)}/>
      },{
        title: '操作',
        dataIndex: '_id',
        key: '_id',
        render:(text,record) =>  <Button type="info" disabled={record.flag} onClick={e=>this.handleDelCp(record.cnum)}>删除</Button>
      }

    ]
    return (
      <span>
        <span onClick={this.showModelHandler}>
          { this.props.children }
        </span>
        <Modal
          title={this.props.record.products.length>0?'修改：'+this.props.record.cnum+'的商品':'新建'+this.props.record.cnum+'的商品'}
          visible={this.state.visible}
          onCancel={this.hideModelHandler}
          onOk={this.handleSubmit}
          width="80%"
        >
          <Table columns={columns} dataSource={this.state.productlist}
              rowKey={record => record.product_num||record.cnum} pagination={false} scroll={{ x: 1000}}/>
          <Row >
            <Col span={12}><Input placeholder="输入商品编号" ref="new_product" /></Col>
            <Col span={12}><Button type="info" onClick={e=>this.handleAddCp(e)}>添加</Button></Col>
          </Row>


        </Modal>
      </span>
    );
  }
}

export default Form.create()(_Modal);
